Γιατί η HTML πιστεύει ότι το "chucknorris" είναι χρώμα;

Είναι αναμονή από τις ημέρες του Netscape:
Τα ψηφία που λείπουν αντιμετωπίζονται ως 0 [...]. Ένα λανθασμένο ψηφίο ερμηνεύεται απλώς ως 0. Για παράδειγμα, οι τιμές # F0F0F0, F0F0F0, F0F0F, #FxFxFx και FxFxFx είναι όλες ίδιες.
Είναι από την ανάρτηση του ιστολογίου Λίγη φήμη για την ανάλυση χρωμάτων του Microsoft Internet Explorer που την καλύπτει με μεγάλη λεπτομέρεια, συμπεριλαμβανομένων των διαφορετικών μηκών των τιμών χρώματος κ.λπ.
Εάν εφαρμόσουμε τους κανόνες με τη σειρά του από την ανάρτηση ιστολογίου, λαμβάνουμε τα εξής:
Αντικαταστήστε όλους τους μη έγκυρους δεκαεξαδικούς χαρακτήρες με 0:
Το chucknorris γίνεται c00c0000000
Πληκτρολογήστε τον επόμενο συνολικό αριθμό χαρακτήρων διαιρούμενοι με 3 (11 → 12):
c00c 0000 0000
Χωρίστε σε τρεις ίσες ομάδες, με κάθε στοιχείο να αντιπροσωπεύει το αντίστοιχο χρωματικό στοιχείο ενός χρώματος RGB:
RGB (c00c, 0000, 0000)
Περικοπή καθένα από τα ορίσματα από δεξιά έως δύο χαρακτήρες.
Το οποίο, τελικά, δίνει το ακόλουθο αποτέλεσμα:
RGB (c0, 00, 00) = # C00000 ή RGB (192, 0, 0)
Ακολουθεί ένα παράδειγμα που δείχνει το χαρακτηριστικό bgcolor σε δράση, για να δημιουργήσει αυτό το "καταπληκτικό" δείγμα χρώματος:
<Πίνακας>

 chuck norris 
 κ. T 
 ninjaturtle 


 άρρωστος 
 crap 
 γρασίδι 


Αυτό απαντά επίσης στο άλλο μέρος της ερώτησης: Γιατί το bgcolor = "chucknorr" παράγει ένα κίτρινο χρώμα; Λοιπόν, εάν εφαρμόσουμε τους κανόνες, η συμβολοσειρά είναι:
c00c00000 => c00 c00 000 => c0 c0 00 [RGB (192, 192, 0)]
Που δίνει ένα ανοιχτό κίτρινο χρυσό χρώμα. Καθώς η συμβολοσειρά ξεκινά ως 9 χαρακτήρες, διατηρούμε το δεύτερο «C» αυτή τη φορά, επομένως καταλήγει στην τελική τιμή χρώματος.
Αρχικά το συνάντησα όταν κάποιος επεσήμανε ότι θα μπορούσατε να κάνετε color = "crap" και, καλά, βγαίνει καφέ.
|
Λυπάμαι που διαφωνώ, αλλά σύμφωνα με τους κανόνες για την ανάλυση μιας παλαιάς τιμής χρώματος που δημοσιεύτηκε από τον @Yuhong Bao, ο chucknorris ΔΕΝ ισοδυναμεί με # CC0000, αλλά μάλλον με # C00000, μια πολύ παρόμοια αλλά ελαφρώς διαφορετική απόχρωση κόκκινου. Χρησιμοποίησα το πρόσθετο Firefox ColorZilla για να το επιβεβαιώσω.
Οι κανόνες αναφέρουν:
κάντε τη συμβολοσειρά ένα μήκος που είναι πολλαπλάσιο των 3 προσθέτοντας 0s: chucknorris0
διαχωρίστε τη συμβολοσειρά σε 3 συμβολοσειρές ίσου μήκους: chuc knor ris0
περικοπή κάθε συμβολοσειράς σε 2 χαρακτήρες: ch kn ri
διατηρήστε τις δεκαεξαδικές τιμές και προσθέστε 0 όπου είναι απαραίτητο: C0 00 00
Κατάφερα να χρησιμοποιήσω αυτούς τους κανόνες για να ερμηνεύσω σωστά τις ακόλουθες συμβολοσειρές:
Γούρια
Τυχη
LuckBeALady
LuckBeALadyTonight
Gangnam Style
ΕΝΗΜΕΡΩΣΗ: Οι αρχικοί απαντητές που δήλωσαν ότι το χρώμα ήταν # CC0000 έκτοτε έχουν επεξεργαστεί τις απαντήσεις τους για να συμπεριλάβουν τη διόρθωση.
|
Τα περισσότερα προγράμματα περιήγησης απλώς θα αγνοήσουν οποιεσδήποτε μη-δεκαεξαδικές τιμές στη χρωματική συμβολοσειρά σας, αντικαθιστώντας τα μη-εξά ψηφία με μηδενικά.
Το ChuCknorris μεταφράζεται σε c00c0000000. Σε αυτό το σημείο, το πρόγραμμα περιήγησης θα διαιρέσει τη συμβολοσειρά σε τρεις ίσες ενότητες, υποδεικνύοντας τιμές κόκκινου, πράσινου και μπλε: c00c 0000 0000. Τα επιπλέον bit σε κάθε ενότητα θα αγνοηθούν, γεγονός που κάνει το τελικό αποτέλεσμα # c00000 που είναι κοκκινωπό χρώμα.
Σημείωση, αυτό δεν ισχύει για την ανάλυση χρώματος CSS, η οποία ακολουθεί το πρότυπο CSS.
  Κοκκινωπό  
  Ίδιο με το παραπάνω  
  Μαύρο  
|
Ο λόγος είναι ότι το πρόγραμμα περιήγησης δεν μπορεί να το καταλάβει και να προσπαθήσει να το μεταφράσει κάπως σε αυτό που μπορεί να κατανοήσει και σε αυτήν την περίπτωση σε δεκαεξαδική τιμή!
Το chucknorris ξεκινά με το c που είναι αναγνωρισμένος χαρακτήρας σε δεκαεξαδικό, επίσης μετατρέπει όλους τους μη αναγνωρισμένους χαρακτήρες σε 0!
Έτσι το chucknorris σε δεκαεξαδική μορφή γίνεται: c00c00000000, όλοι οι άλλοι χαρακτήρες γίνονται 0 και το c παραμένει εκεί που είναι ...
Τώρα διαιρούνται με 3 για RGB (κόκκινο, πράσινο, μπλε) ... R: c00c, G: 0000, B: 0000 ...
Αλλά γνωρίζουμε ότι το έγκυρο δεκαεξαδικό για RGB είναι μόνο 2 χαρακτήρες, σημαίνει R: c0, G: 00, B: 00
Έτσι, το πραγματικό αποτέλεσμα είναι:
bgcolor = "# c00000";
Πρόσθεσα επίσης τα βήματα στην εικόνα ως γρήγορη αναφορά για εσάς:
|
Το πρόγραμμα περιήγησης προσπαθεί να μετατρέψει chucknorris σε δεκαεξαδικό κώδικα χρώματος, επειδή δεν είναι έγκυρη τιμή.
Στο chucknorris, όλα εκτός από το c δεν είναι έγκυρη δεκαεξαδική τιμή.
Έτσι μετατρέπεται σε c00c00000000.
Που γίνεται # c00000, μια κόκκινη απόχρωση.
Αυτό φαίνεται να είναι ένα πρόβλημα κυρίως με τον Internet Explorer και το Opera (12), καθώς το Chrome (31) και ο Firefox (26) το αγνοούν.
ΥΣΤΕΡΟΓΡΑΦΟ. Οι αριθμοί σε αγκύλες είναι οι εκδόσεις του προγράμματος περιήγησης που δοκίμασα.
Σε μια ελαφρύτερη νότα
Το Chuck Norris δεν συμμορφώνεται με τα πρότυπα ιστού. Τα πρότυπα Ιστού συμμορφώνονται
σε αυτόν. # BADA55
|
Η προδιαγραφή WHATWG HTML έχει τον ακριβή αλγόριθμο για την ανάλυση ενός παλαιού χρώματοςαξία:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Ο κωδικός Netscape Classic που χρησιμοποιείται για την ανάλυση χρωμάτων είναι ανοιχτού κώδικα:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Για παράδειγμα, παρατηρήστε ότι κάθε χαρακτήρας αναλύεται ως δεκαεξαδικό ψηφίο και μετά μετατοπίζεται σε ακέραιο αριθμό 32-bit χωρίς έλεγχο υπερχείλισης. Μόνο οκτώ δεκαεξαδικά ψηφία χωρούν σε ακέραιο 32-bit, γι 'αυτό λαμβάνονται υπόψη μόνο οι τελευταίοι 8 χαρακτήρες. Μετά την ανάλυση των δεκαεξαδικών ψηφίων σε ακέραιους αριθμούς 32-bit, στη συνέχεια περικόπτονται σε ακέραιους 8-bit διαιρώντας τους με 16 έως ότου χωρέσουν σε 8-bit, γι 'αυτό αγνοούνται τα μηδενικά.
Ενημέρωση: Αυτός ο κώδικας δεν ταιριάζει ακριβώς με αυτό που ορίζεται στις προδιαγραφές, αλλά η μόνη διαφορά είναι μερικές γραμμές κώδικα. Νομίζω ότι αυτές οι γραμμές προστέθηκαν (στο Netscape 4):
εάν (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Απάντηση:
Το πρόγραμμα περιήγησης θα προσπαθήσει να μετατρέψει το chucknorris σε δεκαεξαδική τιμή.
Εφόσον το c είναι ο μόνος έγκυρος δεκαεξαδικός χαρακτήρας στο chucknorris, η τιμή μετατρέπεται σε: c00c00000000 (0 για όλες τις τιμές που δεν ήταν έγκυρες)
Το πρόγραμμα περιήγησης στη συνέχεια διαιρεί το αποτέλεσμα σε 3 ομάδες: Κόκκινο = c00c, Πράσινο = 0000, Μπλε = 0000.
Δεδομένου ότι οι έγκυρες τιμές hex για φόντα html περιέχουν μόνο 2 ψηφία για κάθε τύπο χρώματος (r, g, b), τα τελευταία 2 ψηφία περικόπτονται από κάθε ομάδα, αφήνοντας μια τιμή rgb c00000 που είναι ένα τούβλο-κοκκινωπό χρώμα.
|
Το chucknorris ξεκινά με το c και το πρόγραμμα περιήγησης το διαβάζει σε δεκαεξαδική τιμή.
Επειδή τα A, B, C, D, E και F είναι χαρακτήρες σε δεκαεξαδικό.
Το πρόγραμμα περιήγησης μετατρέπει το chucknorris σε δεκαεξαδική τιμή, C00C00000000.
Στη συνέχεια, η δεκαεξαδική τιμή C00C00000000 μετατρέπεται σε μορφή RGB (διαιρείται με 3):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Το πρόγραμμα περιήγησης χρειάζεται μόνο δύο ψηφία για να δείξει το χρώμα:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Τέλος, εμφανίστε bgcolor = C00000 στο πρόγραμμα περιήγησης ιστού.
Ακολουθεί ένα παράδειγμα που το αποδεικνύει:
<Πίνακας>

 chucknorris 
 c00c00000000 
 c00000 


|
Οι κανόνες για την ανάλυση χρωμάτων σε χαρακτηριστικά παλαιού τύπου περιλαμβάνουν επιπλέον βήματα από αυτά που αναφέρονται στις υπάρχουσες απαντήσεις. Το κομμένο στοιχείο σε 2 ψηφία τμήμα περιγράφεται ως:
Απορρίψτε όλους τους χαρακτήρες εκτός από τους τελευταίους 8
Απορρίψτε τα μηδενικά που οδηγούν ένα προς ένα αρκεί όλα τα στοιχεία να έχουν μηδενικό
Απορρίψτε όλους τους χαρακτήρες εκτός από τους πρώτους 2
Μερικά παραδείγματα:
oooFoooFoooF
000F 000F 000F <- αντικαταστήστε, μαξιλάρι και κομμάτι
0F 0F 0F <- κορυφαία μηδενικά περικομμένα
0F 0F 0F <- περικοπή σε 2 χαρακτήρες από δεξιά
oooFooFFoFFF
000F 00FF 0FFF <- αντικαταστήστε, μαξιλάρι και κομμάτι
00F 0FF FFF <- κορυφαία μηδενικά περικομμένα
00 0F FF <- περικοπή σε 2 χαρακτήρες από δεξιά
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- αντικατάσταση, pad και κομμάτι
BC000000 BC000000 BC000000 <- περικοπή σε 8 χαρακτήρες από αριστερά
BC BC BC <- περικοπή σε 2 χαρακτήρες από δεξιά
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- αντικαταστήστε, μαξιλάρι και κομμάτι
0C000000 0C000000 0C000000 <- περικοπή σε 8 χαρακτήρες από αριστερά
C000000 C000000 C000000 <- κορυφαία μηδενικά περικομμένα
C0 C0 C0 <- περικοπή σε 2 χαρακτήρες από δεξιά
Ακολουθεί μια μερική εφαρμογή του αλγορίθμου. Δεν χειρίζεται σφάλματα ή περιπτώσεις όπου ο χρήστης εισάγει ένα έγκυρο χρώμα.
συνάρτηση parseColor (είσοδος) {
// todo: σφάλμα επιστροφής εάν η εισαγωγή είναι ""
input = input.trim ();
// todo: σφάλμα επιστροφής εάν η είσοδος είναι "διαφανής"
// todo: επιστρέψτε το αντίστοιχο #rrggbb εάν η είσοδος είναι με όνομα
// todo: επιστροφή #rrggbb εάν η εισαγωγή ταιριάζει με #rgb
// todo: αντικαταστήστε σημεία κωδικού unicode μεγαλύτερα από U + FFFF με 00
εάν (input.length> 128) {
input = input.slice (0, 128);
}
if (input.charAt (0) === "#") {
input = input.slice (1);
}
input = input.replace (/ [^ 0-9A-Fa-f] / g, "0");
ενώ (input.length === 0 || input.length% 3> 0) {
είσοδος + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
αν (r.length> 8) {
r = r.slice (-8);
g = g.slice (-8);
b = b.slice (-8);
}
ενώ (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r.slice (1);
g = g.slice (1);
b = b. slice (1);
}
αν (r.length> 2) {
r = r.slice (0, 2);
g = g.slice (0, 2);
b = b. slice (0, 2);
}
επιστροφή "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (συνάρτηση () {
$ ("# input"). on ("αλλαγή", συνάρτηση () {
var input = $ (αυτό) .val ();
var color = parseColor (είσοδος);
var $ κύτταρα = $ ("# αποτέλεσμα tbody td");
$ cells.eq (0) .attr ("bgcolor", εισαγωγή);
$ cells.eq (1) .attr ("bgcolor", χρώμα);
varαξία:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Ο κωδικός Netscape Classic που χρησιμοποιείται για την ανάλυση χρωμάτων είναι ανοιχτού κώδικα:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Για παράδειγμα, παρατηρήστε ότι κάθε χαρακτήρας αναλύεται ως δεκαεξαδικό ψηφίο και μετά μετατοπίζεται σε ακέραιο αριθμό 32-bit χωρίς έλεγχο υπερχείλισης. Μόνο οκτώ δεκαεξαδικά ψηφία χωρούν σε ακέραιο 32-bit, γι 'αυτό λαμβάνονται υπόψη μόνο οι τελευταίοι 8 χαρακτήρες. Μετά την ανάλυση των δεκαεξαδικών ψηφίων σε ακέραιους αριθμούς 32-bit, στη συνέχεια περικόπτονται σε ακέραιους 8-bit διαιρώντας τους με 16 έως ότου χωρέσουν σε 8-bit, γι 'αυτό αγνοούνται τα μηδενικά.
Ενημέρωση: Αυτός ο κώδικας δεν ταιριάζει ακριβώς με αυτό που ορίζεται στις προδιαγραφές, αλλά η μόνη διαφορά είναι μερικές γραμμές κώδικα. Νομίζω ότι αυτές οι γραμμές προστέθηκαν (στο Netscape 4):
εάν (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Απάντηση:
Το πρόγραμμα περιήγησης θα προσπαθήσει να μετατρέψει το chucknorris σε δεκαεξαδική τιμή.
Εφόσον το c είναι ο μόνος έγκυρος δεκαεξαδικός χαρακτήρας στο chucknorris, η τιμή μετατρέπεται σε: c00c00000000 (0 για όλες τις τιμές που δεν ήταν έγκυρες)
Το πρόγραμμα περιήγησης στη συνέχεια διαιρεί το αποτέλεσμα σε 3 ομάδες: Κόκκινο = c00c, Πράσινο = 0000, Μπλε = 0000.
Δεδομένου ότι οι έγκυρες τιμές hex για φόντα html περιέχουν μόνο 2 ψηφία για κάθε τύπο χρώματος (r, g, b), τα τελευταία 2 ψηφία περικόπτονται από κάθε ομάδα, αφήνοντας μια τιμή rgb c00000 που είναι ένα τούβλο-κοκκινωπό χρώμα.
|
Το chucknorris ξεκινά με το c και το πρόγραμμα περιήγησης το διαβάζει σε δεκαεξαδική τιμή.
Επειδή τα A, B, C, D, E και F είναι χαρακτήρες σε δεκαεξαδικό.
Το πρόγραμμα περιήγησης μετατρέπει το chucknorris σε δεκαεξαδική τιμή, C00C00000000.
Στη συνέχεια, η δεκαεξαδική τιμή C00C00000000 μετατρέπεται σε μορφή RGB (διαιρείται με 3):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Το πρόγραμμα περιήγησης χρειάζεται μόνο δύο ψηφία για να δείξει το χρώμα:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Τέλος, εμφανίστε bgcolor = C00000 στο πρόγραμμα περιήγησης ιστού.
Ακολουθεί ένα παράδειγμα που το αποδεικνύει:
<Πίνακας>

 chucknorris 
 c00c00000000 
 c00000 


|
Οι κανόνες για την ανάλυση χρωμάτων σε χαρακτηριστικά παλαιού τύπου περιλαμβάνουν επιπλέον βήματα από αυτά που αναφέρονται στις υπάρχουσες απαντήσεις. Το κομμένο στοιχείο σε 2 ψηφία τμήμα περιγράφεται ως:
Απορρίψτε όλους τους χαρακτήρες εκτός από τους τελευταίους 8
Απορρίψτε τα μηδενικά που οδηγούν ένα προς ένα αρκεί όλα τα στοιχεία να έχουν μηδενικό
Απορρίψτε όλους τους χαρακτήρες εκτός από τους πρώτους 2
Μερικά παραδείγματα:
oooFoooFoooF
000F 000F 000F <- αντικαταστήστε, μαξιλάρι και κομμάτι
0F 0F 0F <- κορυφαία μηδενικά περικομμένα
0F 0F 0F <- περικοπή σε 2 χαρακτήρες από δεξιά
oooFooFFoFFF
000F 00FF 0FFF <- αντικαταστήστε, μαξιλάρι και κομμάτι
00F 0FF FFF <- κορυφαία μηδενικά περικομμένα
00 0F FF <- περικοπή σε 2 χαρακτήρες από δεξιά
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- αντικατάσταση, pad και κομμάτι
BC000000 BC000000 BC000000 <- περικοπή σε 8 χαρακτήρες από αριστερά
BC BC BC <- περικοπή σε 2 χαρακτήρες από δεξιά
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- αντικαταστήστε, μαξιλάρι και κομμάτι
0C000000 0C000000 0C000000 <- περικοπή σε 8 χαρακτήρες από αριστερά
C000000 C000000 C000000 <- κορυφαία μηδενικά περικομμένα
C0 C0 C0 <- περικοπή σε 2 χαρακτήρες από δεξιά
Ακολουθεί μια μερική εφαρμογή του αλγορίθμου. Δεν χειρίζεται σφάλματα ή περιπτώσεις όπου ο χρήστης εισάγει ένα έγκυρο χρώμα.
συνάρτηση parseColor (είσοδος) {
// todo: σφάλμα επιστροφής εάν η εισαγωγή είναι ""
input = input.trim ();
// todo: σφάλμα επιστροφής εάν η είσοδος είναι "διαφανής"
// todo: επιστρέψτε το αντίστοιχο #rrggbb εάν η είσοδος είναι με όνομα
// todo: επιστροφή #rrggbb εάν η εισαγωγή ταιριάζει με #rgb
// todo: αντικαταστήστε σημεία κωδικού unicode μεγαλύτερα από U + FFFF με 00
εάν (input.length> 128) {
input = input.slice (0, 128);
}
if (input.charAt (0) === "#") {
input = input.slice (1);
}
input = input.replace (/ [^ 0-9A-Fa-f] / g, "0");
ενώ (input.length === 0 || input.length% 3> 0) {
είσοδος + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
αν (r.length> 8) {
r = r.slice (-8);
g = g.slice (-8);
b = b.slice (-8);
}
ενώ (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r.slice (1);
g = g.slice (1);
b = b. slice (1);
}
αν (r.length> 2) {
r = r.slice (0, 2);
g = g.slice (0, 2);
b = b. slice (0, 2);
}
επιστροφή "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (συνάρτηση () {
$ ("# input"). on ("αλλαγή", συνάρτηση () {
var input = $ (αυτό) .val ();
var color = parseColor (είσοδος);
var $ κύτταρα = $ ("# αποτέλεσμα tbody td");
$ cells.eq (0) .attr ("bgcolor", εισαγωγή);
$ cells.eq (1) .attr ("bgcolor", χρώμα);
var